<template>
    <div class="left-content">
        <!-- 基础组件 -->
        <div class="section">
            <h3 class="section-title">基础组件</h3>
            <VueDraggable v-model="basicComponents" :animation="150" ghostClass="ghost"
                :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" :clone="cloneComponent"
                class="component-grid">
                <div class="component-item" v-for="component in basicComponents" :key="component.type"
                    @click="selectComponent(component)">
                    <div class="component-icon">
                        <i class="iconfont-sys" v-html="component.icon"></i>
                    </div>
                    <span class="component-label">{{ component.label }}</span>
                </div>
            </VueDraggable>
        </div>

        <!-- 描述分割 -->
        <div class="section">
            <h3 class="section-title">描述分割</h3>
            <VueDraggable v-model="descriptionComponents" :animation="150" ghostClass="ghost"
                :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" :clone="cloneComponent"
                class="component-grid">
                <div class="component-item" v-for="component in descriptionComponents" :key="component.type"
                    @click="selectComponent(component)">
                    <div class="component-icon">
                        <i class="iconfont-sys" v-html="component.icon"></i>
                    </div>
                    <span class="component-label">{{ component.label }}</span>
                </div>
            </VueDraggable>
        </div>

        <!-- 个人信息 -->
        <div class="section">
            <h3 class="section-title">个人信息</h3>
            <VueDraggable v-model="personalInfoComponents" :animation="150" ghostClass="ghost"
                :group="{ name: 'people', pull: 'clone', put: false }" :sort="false" :clone="cloneComponent"
                class="component-grid">
                <div class="component-item" v-for="component in personalInfoComponents" :key="component.type"
                    @click="selectComponent(component)">
                    <div class="component-icon">
                        <i class="iconfont-sys" v-html="component.icon" v-if="component.icon.includes('&#')"></i>
                        <i :class="component.icon" v-else></i>
                    </div>
                    <span class="component-label">{{ component.label }}</span>
                </div>
            </VueDraggable>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

// 基础组件
const basicComponents = ref([
    { type: 'radio', label: '单选', icon: '&#xe715;' },
    { type: 'checkbox', label: '多选', icon: '&#xe708;' },
    { type: 'textarea', label: '文本框', icon: '&#xe66f;' },
    { type: 'date', label: '日期', icon: '&#xe751;' },
    { type: 'time', label: '时间', icon: '&#xe6f7;' },
    { type: 'upload', label: '图片上传', icon: '&#xe763;' }
])

// 描述分割组件
const descriptionComponents = ref([
    { type: 'richText', label: '文本描述', icon: '&#xe832;' },
    { type: 'image', label: '图片', icon: '&#xe634;' },
    { type: 'divider', label: '分隔栏', icon: '&#xe66d;' }
])

// 个人信息组件
const personalInfoComponents = ref([
    { type: 'name', label: '姓名', icon: '&#xe734;' },
    { type: 'gender', label: '性别', icon: 'icon-gender' },
    { type: 'age', label: '年龄', icon: '&#xe82b;' },
    { type: 'company', label: '公司', icon: '&#xe8a7;' },
    { type: 'phone', label: '手机号码', icon: '&#xe70d;' },
    { type: 'idcard', label: '身份证号', icon: '&#xe873;' },
    { type: '7', label: '文本', icon: '&#xe72a;' },
    { type: 'address', label: '地址', icon: '&#xe736;' },
])

const emit = defineEmits<{
    'component-selected': [component: any]
}>()

const getDefaultComponentData = (component: any) => ({
    ...component,
    required: true,
    placeholder: `请输入${component.label}`,
    options: [
        { label: component.type === 'gender' ? '男' : '选项1', value: 'option1' },
        { label: component.type === 'gender' ? '女' : '选项2', value: 'option2' },
        { label: component.type === 'gender' ? '(保密)' : '选项3', value: 'option3' }
    ],
    remark: '',
    defaultText: '',
    date: '1',
    upoladNum: false,
    richText: '',
    image: '',
    addressType: '1'
})

// 选择组件
const selectComponent = (component: any) => {
    const componentData = getDefaultComponentData(component)
    emit('component-selected', componentData)
}

const cloneComponent = (component: any) => {
    return getDefaultComponentData(component)
}
</script>

<style lang="scss" scoped>
.left-content {
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.tab {
    padding: 12px 20px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;

    &.active {
        color: #1677ff;
        background: #1677ff;
        color: #fff;
        border-bottom-color: #1677ff;
    }

    &:hover:not(.active) {
        color: #1677ff;
    }
}

.section {
    margin-bottom: 24px;

    &:last-child {
        margin-bottom: 0;
    }
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    padding: 0;
}

.component-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.component-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;

    &:hover {
        border-color: #1677ff;
        background: #f0f8ff;
    }

    &:active {
        transform: scale(0.98);
    }
}

.component-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 16px;
}

.component-label {
    font-size: 12px;
    color: #666;
    text-align: center;
}

// 图标样式
.icon-radio::before {
    content: '○';
    font-size: 18px;
    font-weight: bold;
}

.icon-checkbox::before {
    content: '☑';
    font-size: 18px;
}

.icon-select::before {
    content: '▼';
    font-size: 14px;
    font-weight: bold;
}

.icon-cascader::before {
    content: '▼▼';
    font-size: 12px;
    font-weight: bold;
}

.icon-input::before {
    content: 'T';
    font-size: 16px;
    font-weight: bold;
    font-family: serif;
}

.icon-date::before {
    content: '📅';
    font-size: 16px;
}

.icon-time::before {
    content: '🕐';
    font-size: 16px;
}

.icon-upload::before {
    content: '📤';
    font-size: 16px;
}

.icon-text::before {
    content: '≡';
    font-size: 16px;
    font-weight: bold;
}

.icon-image::before {
    content: '🏔';
    font-size: 16px;
}

.icon-divider::before {
    content: '⋯';
    font-size: 16px;
    font-weight: bold;
}

.icon-name::before {
    content: '👤';
    font-size: 16px;
}

.icon-gender::before {
    content: '⚥';
    font-size: 16px;
}

.icon-age::before {
    content: '🎂';
    font-size: 16px;
}

.icon-company::before {
    content: '💼';
    font-size: 16px;
}

.icon-position::before {
    content: '👔';
    font-size: 16px;
}

.icon-phone::before {
    content: '📱';
    font-size: 16px;
}

.icon-idcard::before {
    content: '🆔';
    font-size: 16px;
}

.icon-wechat::before {
    content: '💬';
    font-size: 16px;
}

.icon-address::before {
    content: '📍';
    font-size: 16px;
}

.icon-email::before {
    content: '✉';
    font-size: 16px;
}
</style>